<template>
  <div class="mr-root">
    <p v-if="k" class="not">未登录</p>
    <div v-if="!k">
      <div class="notread message">
        <h3>未读消息</h3>
        <p v-for="(nr,index) in user.hasnot_read_messages" v-if="notread">
          <router-link :to="'/topics/'+nr.topic.id">
            {{nr.topic.title}}
          </router-link>
        </p>
        <p v-if="!notread">暂时没有未读消息</p>
      </div>
      <div class="read message">
        <h3>已读消息</h3>
        <p v-for="(r,index) in user.has_read_messages" v-if="read">
          <span class="usern">{{r.author.loginname}}回复了你的话题</span>
          <router-link :to="'/topics/'+r.topic.id" class="title">
            {{r.topic.title}}
          </router-link>
        </p>
        <p v-if="!read">暂时没有任何消息</p>
      </div>
    </div>
  </div>
  <!--this.axios.get("http://www.vue-js.com/api/v1/user/" + localStorage.getItem('accesstoken')+"/messages ")-->
</template>
<script>
  export default {
    data() {
      return {
        read: true,
        notread: true,
        k: false,
        ac: "",
        user: {}
      }
    },
    created() {
      this.ac = localStorage.getItem('accesstoken')
      if (localStorage.getItem('accesstoken')) {
        this.k = false
        this.axios.get("http://www.vue-js.com/api/v1/messages/?accesstoken=" + this.ac)
          .then(data => {
            console.log(data.data.data)
            this.user = data.data.data
            // console.log(this.user.has_read_messages)
            if (this.user.has_read_messages.length == 0) {
              this.read = false
            }
            if (this.user.hasnot_read_messages.length == 0) {
              this.notread = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.k = true
      }
    }
  }

</script>

<style scoped>
  .message{
    padding: 0 15px;
  }
  .notread {
    margin-bottom: 30px;
  }
  
  h3 {
    padding: 5px 15px;
    background-color: #f6f6f6;
  }
  
  p {
    font-size: .4rem;
    padding: 10px 0;
  }
  
  .not {
    font-size: .6rem;
  }
  .usern{
    display: block;
  }
  .title{
    display: block;
    color: darkturquoise;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
